import { Box, Image, Tab, TabList, TabPanel, TabPanels, Tabs, useColorModeValue } from "@chakra-ui/react"
import Sigup from "./Sigup"
import { useBgColor } from "./styles"
import LogoLight from './assets/images/chakra-ui-light.png'
import LogoDark from './assets/images/chakra-ui-dark.png'
import Sigin from "./Sigin"

export default function Form() {
    const logo = useColorModeValue(LogoLight, LogoDark)
    return <>
        <Box w="100%" bgColor={useBgColor()} p="4" borderRadius="md">
            <Image w="250px" mx="auto" src={logo} />
            <Tabs isFitted mt="1rem">
                <TabList>
                    <Tab _focus={{ boxShadow: 'none' }}>注册</Tab>
                    <Tab _focus={{ boxShadow: 'none' }}>登录</Tab>
                </TabList>

                <TabPanels>
                    <TabPanel>
                        <Sigup />
                    </TabPanel>
                    <TabPanel>
                        <Sigin />
                    </TabPanel>
                </TabPanels>
            </Tabs>
        </Box>
    </>
}